<template>
  <el-form
    :model="form"
    label-width="auto"
    label-position="left"
    :rules="rules"
    ref="formRef"
    style="padding: 20px; max-width: 1000px"
  >
    <el-form-item label="合同编号" prop="contractNo">
      <el-select
        style="width: 200px"
        v-model="form.contractNo"
        filterable
        placeholder="请选择"
        @change="selectContract"
        :disabled="form.id"
      >
        <el-option
          v-for="item in contractList"
          :key="item.id"
          :value="item.contractNo"
          :label="item.contractNo"
        ></el-option>
      </el-select>
    </el-form-item>
    <!-- 第一行：退款类别 + 合同编号 -->
    <el-form-item label="退款类别" prop="refundType">
      <el-radio-group v-model="form.refundType">
        <el-radio label="普通退款" :value="1" />
        <el-radio label="解约" :value="2" />
        <el-radio label="赔付" :value="3" />
      </el-radio-group>
    </el-form-item>

    <!-- 第二行：退款款项收款账户、客户信息 -->
    <el-form-item label="退款收款账户" prop="refundPayerType">
      <el-radio-group
        v-model="form.refundPayerType"
        @change="selectRefundPayerType"
        :disabled="form.id"
      >
        <el-radio label="退款（买方）" :value="2"></el-radio>
        <el-radio label="代付款（卖方）" :value="1"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="退款路径" prop="refundUserPriceType">
      <el-radio-group v-model="form.refundUserPriceType">
        <el-radio label="线上缴费退款" :value="1"></el-radio>
        <el-radio label="现金退款" :value="2"></el-radio>
        <!-- <el-radio label="其他" :value="3"></el-radio> -->
      </el-radio-group>
    </el-form-item>
    <el-row :gutter="10">
      <el-col :span="8">
        <el-form-item label="客户信息">
          <el-input
            readonly
            v-model="form.customerName"
            placeholder="客户姓名"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label-width="auto">
          <el-input
            readonly
            v-model="form.customerPhone"
            placeholder="客户电话"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label-width="auto">
          <el-input v-model="form.receiptAccount" placeholder="收款账户" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item label="退款项目" prop="refundCategories">
      <el-checkbox-group
        v-model="form.refundCategories"
        @change="selectRefundCategories"
      >
        <el-checkbox
          v-for="item in refundItemList"
          :key="item.id"
          :label="item.itemName"
          :disabled="item.isCheck == 2"
          :value="item.id"
        />
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="退款金额分类" prop="refundPriceType">
      <el-radio-group v-model="form.refundPriceType">
        <el-radio label="退全款" :value="1" />
        <el-radio
          v-if="form?.refundCategories?.length <= 1"
          label="部分退款"
          :value="2"
        />
      </el-radio-group>
    </el-form-item>

    <el-form-item label="退款方式" prop="refundMethod">
      <el-radio-group v-model="form.refundMethod">
        <el-radio label="现金" :value="1" />
        <el-radio label="账户" :value="2" />
        <el-radio label="现金+账户" :value="3" />
      </el-radio-group>
    </el-form-item>

    <el-form-item label="退款账户" prop="refundAccount">
      <el-radio-group v-model="form.refundAccount">
        <el-radio label="公司+门店" :value="1" />
        <el-radio label="门店" :value="2" />
      </el-radio-group>
    </el-form-item>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="应收金额（小写）">
          <el-input
            v-model="form.receivableAmount"
            placeholder="应收金额（小写）"
            readonly
          >
            <template #append>元</template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="应收金额（大写）">
          <el-input
            v-model="form.receivableAmountInWords"
            placeholder="应收金额（大写）"
            readonly
          >
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="已收金额（小写）">
          <el-input
            v-model="form.receivedAmount"
            placeholder="已收金额（小写）"
            readonly
          >
            <template #append>元</template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="已收金额（大写）">
          <el-input
            v-model="form.receivedAmountInWords"
            placeholder="已收金额（大写）"
            readonly
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="退款金额（小写）" prop="refundAmount">
          <el-input
            v-model="form.refundAmount"
            placeholder="请输入退款金额"
            @blur="getDxMoney(form.refundAmount)"
          >
            <template #append>元</template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="退款金额（大写）">
          <el-input
            v-model="form.refundAmountInWords"
            readonly
            placeholder="退款金额（大写）"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 第九行：退款日期 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="退款日期" prop="refundDate">
          <el-date-picker
            v-model="form.refundDate"
            type="date"
            placeholder="选择日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 备注 -->
    <el-form-item label="备注">
      <el-input type="textarea" v-model="form.notes" rows="2" />
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref, defineProps, onMounted } from "vue";
import {
  listContract,
  listRefundItem,
  refundOrder,
  getCalLetter,
} from "@/api/business/refund";
const props = defineProps({
  fData: {
    type: Object,
    required: true,
  },
});
const { proxy } = getCurrentInstance();
const form = reactive({ ...props.fData });
const contractList = ref([]);
const refundCategoriesNum = ref([]);
function getAllContractList() {
  listContract().then((res) => {
    contractList.value = res.data;
  });
}
getAllContractList();
//获取退款大写金额
function getDxMoney(value) {
  getCalLetter({ amount: value }).then((res) => {
    form.refundAmountInWords = res.msg;
  });
}

//选择合同编号获取当前合同编号中的信息存到curentContract中
const currentContract = ref({});
function selectContract(value) {
  currentContract.value = contractList.value.find(
    (v) => v.contractNo === value
  );
  reset();
  form.contractNo = value;
}
onMounted(() => {
  if (form.id) {
    currentContract.value.id = form.contractId;
    //初始化退款项目
    getRefundItemList({
      type: form.refundPayerType,
      contractId: form.contractId,
    });
  } else {
    reset();
    getRefundItemList(form.refundPayerType);
  }
});
function reset() {
  Object.assign(form, {
    contractNo: "",
    refundType: "",
    refundPayerType: "",
    refundUserPriceType: "",
    customerName: "",
    customerPhone: "",
    receiptAccount: "",
    refundPriceType: "",
    refundCategories: [],
    refundMethod: "",
    refundAccount: "",
    receivableAmount: "",
    receivableAmountInWords: "",
    receivedAmount: "",
    receivedAmountInWords: "",
    refundAmount: "",
    refundAmountInWords: "",
    refundDate: "",
    notes: "",
  });
}
//监听退款账户是买方还是卖方,2买方，1卖方
function selectRefundPayerType(value) {
  if (!form.contractNo) {
    proxy.$modal.alertError("请选择合同编号");
    return;
  }
  const data = {
    type: value,
    contractNo: form.contractNo,
  };
  getRefundItemList(data);
  form.refundCategories = [];
  refundCategoriesNum.value = [];
  if (value == 2) {
    form.customerName = currentContract.value.customerName;
    form.customerPhone = currentContract.value.customerPhone;
  } else if (value == 1) {
    form.customerName = currentContract.value.ownerName;
    form.customerPhone = currentContract.value.ownerPhone;
  }
}

const refundItemList = ref([]);
//获取退款项目列表
function getRefundItemList(data) {
  listRefundItem(data).then((res) => {
    refundItemList.value = res.data;
  });
}
// getRefundItemList(form.refundPayerType);
//监听退款项目
function selectRefundCategories(value) {
  refundCategoriesNum.value = value.map((v) => {
    return { itemId: v, contractId: currentContract.value.id };
  });
  refundOrder({ items: refundCategoriesNum.value }).then((res) => {
    //应收
    form.receivableAmount = res.data.allAmount;
    form.receivableAmountInWords = res.data.allAmountWords;
    //已收
    form.receivedAmount = res.data.payAmount;
    form.receivedAmountInWords = res.data.payAmountWords;
  });
}
const rules = {
  contractNo: [
    { required: true, message: "请选择合同编号", trigger: "change" },
  ],
  refundType: [
    { required: true, message: "请选择退款类别", trigger: "change" },
  ],
  refundPayerType: [
    { required: true, message: "请选择退款账户", trigger: "change" },
  ],
  refundUserPriceType: [
    { required: true, message: "请选择退款方式", trigger: "change" },
  ],
  //退款金额分类
  refundPriceType: [
    { required: true, message: "请选择退款金额分类", trigger: "change" },
  ],
  refundCategories: [
    { required: true, message: "请选择退款项目", trigger: "change" },
  ],
  //退款方式
  refundMethod: [
    { required: true, message: "请选择退款方式", trigger: "change" },
  ],
  //退款对象
  refundAccount: [
    { required: true, message: "请选择退款对象", trigger: "change" },
  ],
  refundAmount: [
    { required: true, message: "请输入退款金额", trigger: "blur" },
  ],
  refundDate: [
    { required: true, message: "请选择退款日期", trigger: "change" },
  ],
};
const formRef = ref();

function validateForm() {
  return formRef.value.validate();
}

defineExpose({
  validateForm,
  form,
});
</script>

<style scoped>
.mb-3 {
  margin-bottom: 16px;
}
</style>
